<template>
  <div class="register-cont">
    <section class="container">
      <div class="vnslogo">
        <img src="../assets/image/vnslogo.png" alt="" />
        <h3>维纳斯账号注册</h3>
      </div>
      <!-- 注册表格 -->
      <div class="reg-form">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="50px"
          class="demo-ruleForm"
          style="background: #fff; padding: 30px 0; border-radius: 20px"
        >
          <el-form-item label="邮箱:" prop="username" style="margin-left: 42px">
            <el-input
              type="text"
              v-model="ruleForm.username"
              autocomplete="off"
              placeholder="请输入邮箱"
              style="width: 220px; border: none"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password" style="margin-left: 42px">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              placeholder="请输入密码"
              style="width: 220px; border: none"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              style="width: 258px; margin-top: 20px"
              round
              >注册</el-button
            >
            <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="reg-links">
        <ul class="reg-links-ul">
          <li>
            <router-link to="/">返回首页</router-link>
            <span class="sep1"></span>
          </li>
          <li>
            <router-link to="/login">立即登录</router-link>
            <span class="sep2"></span>
          </li>
          <li><a href="">忘记密码？</a></li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
import { Form } from "vant";
import { Field } from "vant";
import { Toast } from "vant";

import { userReg } from "../api/user";
export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { validator: validateName, trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          console.log(this.ruleForm);
          userReg(this.ruleForm).then((res) => {
            console.log(res.data);
            let { code, msg } = res.data;
            if(code==1){
              this.$message({
                type: "success",
                message: msg,
              });
            }
            if(code==0){
              this.$message({
                type: "error",
                message: msg,
              });
            }
            
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  overflow-y: auto;
  padding: 50px 0 0 0;
  height: 667px;
  .vnslogo {
    text-align: center;
    img {
      width: 60px;
      height: 60px;
    }
    h3 {
      margin: 18px 0;
      font-size: 18px;
      color: #999;
    }
  }
  .reg-form {
    margin-left: 10px;
    margin-right: 10px;
    .van-form {
      height: 200px;
      .van-cell {
        width: 353px;
      }
      .el-input__inner {
        border: none !important;
      }
      .van-button--info {
        background: #f60;
        border: none;
        border: 1px solid #f60;
        width: 353px;
        margin-left: -15px;
      }
    }
  }
  .reg-links {
    width: 100%;
    height: 25px;
    line-height: 25px;
    padding-top: 20px;
    margin-top: 6%;
    .reg-links-ul {
      display: flex;
      justify-content: center;
      padding: 0 10px;
      text-align: center;

      li {
        a {
          color: #646566;
          display: inline-block;
          text-align: center;
        }
        span {
          display: inline-block;
          width: 2px;
          background: #ddd;
          margin: 5px 15px 0 15px;
          padding-top: 14px;
        }
      }
    }
  }
}
</style>